<template>
  <!-- class="btn" -->
  <el-button v-bind="$attrs" :loading="loading" @click="fnClick">
    <slot />
  </el-button>
</template>

<script setup lang="ts">
// import { ref } from "vue";
// import { ElMessageBox, ElMessage } from "element-plus";
import debounce from 'lodash/debounce'
// 定义props类型
interface IProps {
  btnLoading?: boolean
  debounce?: number | boolean
}
// 设置props默认值
const props = withDefaults(defineProps<IProps>(), {
  btnLoading: false,
  debounce: false,
})
const emits = defineEmits(['click'])
const loading = ref<boolean>(false)
const handleClick = () => {
  loading.value = props.btnLoading ? true : false
  emits('click', () => {
    loading.value = false
  })
}
const debounceTime = typeof props.debounce === 'number' ? props.debounce : 1000
const debounceClick = debounce(handleClick, debounceTime, {
  leading: true,
  trailing: false,
})
const fnClick = props.debounce ? debounceClick : handleClick
</script>

<style scoped></style>
